<template>
    <div class="index">
        <div class="index_header">
            <div class="left">厨艺天堂</div>
            <div class="middle">
                <router-link to="/search">
                    <div class="search_icon"></div>
                    <input type="text" placeholder="搜索菜谱，食谱，食材......">
                </router-link>
            </div>
            <div class="right">
                <img src="../assets/img/deng.png" @click="find = !find">
            </div>
            <div class="sidebar" v-if="find">
                <div><router-link to="/home">我的</router-link></div>
                <div><router-link to="/shop">商城</router-link></div>
                <div><router-link to="/collect">收藏</router-link></div>
            </div>
        </div>
        <div class="index_middle">
            <router-link active-class="active" to="/index/focus">关注</router-link>
            <router-link active-class="active" to="/index/recommend">推荐</router-link>
            <router-link active-class="active" to="/index/note">笔记</router-link>
            <router-link active-class="active" to="/index/video">视频</router-link>
            <router-link active-class="active" to="/index/active">活动</router-link>
        </div>
        <div class="index_final">
            <router-view></router-view>
        </div>
    </div>
</template>

<script>
    export default {
        data() {
            return {
                find: false
            }
        },
    }
</script>

<style lang="less" scoped>
@import '../common/less/varible.less';
    .index{
        width: 100%;
        .index_header{    
            width: 100%;
            height: 60px;
            // border-bottom: 1px solid black;
            padding: 10px;
            display: flex;
            align-items: center;

            .left{
                color: @Color;
                font-size: 20px;
                font-family: cmfb;
            }

            .middle{
                background-color: #f7f8fa;
                height: 30px;
                width: 220px;
                margin: 0 15px;
                border-radius: 15px;
                a{
                    background-color: #f7f8fa;
                    height: 30px;
                    width: 220px;
                    margin: 0 10px;
                    display: flex;
                    align-items: center;
                    justify-content: center;
                    border-radius: 15px;
                    .search_icon{
                    width: 20px;
                    height: 20px;
                    background-image: url(../assets/img/search_icon.png);
                    background-size: cover;
                    margin-right: 10px;
                    }
                    input{
                        height: 28px;
                        padding: 0;
                        background-color: #f7f8fa;
                        font-size: 15px;
                    }
                }
            }

            .right{
                img{
                    margin-top: -4px;
                    width: 24px;
                    height: 24px;
                }
            }

            .sidebar{
                position: absolute;
                right: 10px;
                top: 50px;
                // border: 1px solid black;
                font-size: 18px;
                text-align: center;
                width: 60px;
                z-index: 1000;
                div{
                    a{
                        color: white;
                    }
                    border: 1px solid #fff;
                    background-color: @bgColor;
                }
            }
        }
        .index_middle{
            width: 100%;
            height: 45px;
            // border-bottom: 1px solid black;
            display: flex;
            align-items: center;
            justify-content: space-between;
            padding: 0 10px;
            a{
                padding: 10px 5px 0 5px;
                font-family: cmff;
                height: 100%;
                font-size: 20px;
            }
            a.active{
                display: block;
                border-bottom: 5px solid @bdColor;
            }
        }
        .index_final{
            width: 100%;
        }
    }
</style>